<template>
  <Table ref="tableRef" :columns="columns" :data="loadData" :alert="false" bordered>
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.dataIndex === 'index'">
        {{ index + 1 }}
      </template>
      <template v-if="column.dataIndex === 'action'">
        <div class="table-operation">
          <a @click="handelAdd(record)">新增组件</a>
        </div>
      </template>
    </template>
  </Table>
</template>

<script setup lang="ts">
import { getMyAppLists } from '@/api/operationManagement';
const columns = [
  { dataIndex: 'index', title: '序号', align: 'center', width: 60 },
  { dataIndex: 'name', title: '应用名称', align: 'center', ellipsis: true, width: 260 },
  { dataIndex: 'envNum', title: '环境数', align: 'center', ellipsis: true },
  { dataIndex: 'compNum', title: '组件数', align: 'center', ellipsis: true },
  { dataIndex: 'pipelineNum', title: '流水线数', align: 'center', ellipsis: true },
  { dataIndex: 'creator', title: '创建人', align: 'center', ellipsis: true },
  { dataIndex: 'createTime', title: '创建时间', align: 'center', ellipsis: true },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 160,
  },
];

const tableRef = ref<any>('');

const loadData = async (parameter: any) => {
  const parameObj = {
    currentPage: parameter.current,
    pageSize: parameter.size,
    condition: {},
  };
  const data = await getList(parameObj);
  return data;
};

//获取表格数据
const getList = async (parameObj: any) => {
  return await getMyAppLists(parameObj).then((res) => {
    const data = {
      total: res.totalCount,
      current: res.currentPage,
      pageSize: res.pageSize,
      records:
        res?.records.map((item: any) => {
          return {
            showPassword: false,
            ...item,
          };
        }) || [],
    };
    return data;
  });
};
const router = useRouter();
const handelAdd = (record: any) => {
  sessionStorage.setItem('appCode_id', `app_id${record.code}`);
  router.push({ name: 'applicationManagement' });
};
</script>

<style scoped lang="less"></style>
